import { Card, Space, Form, Select, Button } from 'antd';
import { useEffect, useState } from 'react';
import { cityApi } from '@/utils/api';
import { useDispatch } from 'umi';

interface CityType {
  id: number;
  nm: string;
  py: string;
}

const Search = () => {
  const [form] = Form.useForm();
  const [cts, setCts] = useState<CityType[]>([]);

  const dispatch = useDispatch();

  useEffect(() => {
    (async () => {
      const res = await cityApi();
      setCts(res.cts);
    })();
  }, []);

  const search = () => {
    // console.log(form.getFieldsValue());
    dispatch({
      type: 'city/getTableDataAsync',
      payload: form.getFieldsValue(),
    });
  };

  const reset = () => {
    form.resetFields();
    dispatch({
      type: 'city/getTableDataAsync',
      payload: {},
    });
  };
  return (
    <Card>
      <Form form={form} name="horizontal_login" layout="inline">
        <Form.Item name="city" label="城市">
          <Select style={{ width: 120 }} allowClear>
            {cts.map((item) => {
              return (
                <Select.Option value={item.nm} key={item.id}>
                  {item.nm}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item name="useCar" label="用车模式">
          <Select style={{ width: 120 }} allowClear>
            <Select.Option value="1">禁停区</Select.Option>
            <Select.Option value="2">停车点</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item name="operating" label="运营模式">
          <Select style={{ width: 120 }} allowClear>
            <Select.Option value="1">加盟</Select.Option>
            <Select.Option value="2">自营</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item>
          <Space>
            <Button type="primary" onClick={search}>
              查询
            </Button>
            <Button onClick={reset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default Search;
